<template>
	<view>
	    <rich-text :nodes="richTextNodes"></rich-text>
	  </view>
</template>

<script>
export default {
  data() {
    return {
      richTextNodes: [
        {
          name: 'div',
          attrs: {
            class: 'rich-text-content',
            style: 'color: #333;'
          },
          children: [
            {
              type: 'text',
              text: '这是一段富文本内容，',
            },
            {
              name: 'span',
              attrs: {
                style: 'font-weight: bold;'
              },
              children: [
                {
                  type: 'text',
                  text: '带有加粗效果的文字',
                },
              ],
            },
            {
              type: 'text',
              text: '，以及',
            },
            {
              name: 'a',
              attrs: {
                href: 'https://uniapp.dcloud.io/component/rich-text',
                target: '_blank',
                style: 'color: blue;'
              },
              children: [
                {
                  type: 'text',
                  text: '链接',
                },
              ],
            },
            {
              type: 'text',
              text: '。',
            },
            {
              name: 'img',
              attrs: {
                src: 'blob:http://localhost:8080/4e8bd352-c7a9-400e-a57d-f919a7274582',
                style: 'width: 200px; height: 200px;',
              },
            },
          ],
        },
      ],
    };
  },
};
</script>

<style>
.rich-text-content {
  margin: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  color: #333;
}

.rich-text-content span {
  font-weight: bold;
}

.rich-text-content a {
  color: blue;
}
</style>